
<template>
  <div class="calculation">
    <el-collapse v-model="activeNames" class="custom-collapse">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="title search-title">精准查找</div>
        </template>
        <div class="search">
          <div class="input">
            <label>商户编号：</label>
            <el-input v-model.trim="params.search.merchant_no" clearable></el-input>
          </div>
          <div class="input">
            <label>订单号：</label>
            <el-input v-model.trim="params.search.order_no" clearable></el-input>
          </div>
          <div class="input" style="max-width:480px">
            <label style="min-width: 22%;">时间周期：</label>
            <el-date-picker
              v-model="time"
              style="width:500px!important"
              type="datetimerange"
              range-separator="到"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            ></el-date-picker>
          </div>
          <div class="btn">
            <el-button type="primary" @click="search()">查找</el-button>
            <el-button @click="resetParams()">重置</el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="status">
      <div>
        <p>{{otherInfo.fee_amount}}</p>
        <p>服务费总额（元）</p>
      </div>
      <div>
        <p>{{otherInfo.channel_fee_amount}}</p>
        <p>上游服务费（元）</p>
      </div>
      <div>
        <p>{{otherInfo.platform_service_amount }}</p>
        <p>平台服务费（元）</p>
      </div>
    </div>
    <div class="content">
      <el-table :data="calculationList" border style="width: 100%" v-loading="loading">
        <el-table-column width="50" label="序号" header-align="center" align="center">
          <template slot-scope="scope">
            <div>{{params.per_limit*(params.page-1)+scope.$index+1}}</div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="id" label="订单ID" width="90"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="merchant_no"
          label="商户编号"
          width="140"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="merchant_store_no"
          label="商户门店号"
          width="130"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="merchant_name"
          label="商户名称"
          show-overflow-tooltip
          width="145"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="order_no"
          label="订单号"
          width="250"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="total_amount"
          label="交易金额"
          width="120"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="fee_amount"
          label="服务费（元）"
          width="120"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="channel_fee_amount"
          label="上游服务费（元）"
          width="150"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="platform_service_amount"
          label="平台服务费（元）"
          width="120"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="dealt_at"
          label="完成时间"
          width="150"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="created_at"
          label="创建时间"
          min-width="150"
          width="auto"
        ></el-table-column>
      </el-table>
      <div class="footer">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="params.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.per_limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// 费率统计-费率计算

import { calculationStat } from '@/api/rate-statistic'
import { date, copy } from '@/utils'
export default {
  data() {
    return {
      activeNames: ['1'],
      calculationList: [],
      loading: false,
      time: [],
      otherInfo: {},
      params: {
        page: 1,
        per_limit: 10,
        search: {
          order_no: '',
          merchant_no: '',
          finish_time_begin: '',
          finish_time_end: ''
        }
      },
      total: 0
    }
  },
  beforeMount() {
    this.getData()
  },
  methods: {
    // 查询
    search() {
      this.getData()
    },
    // 重置查找条件
    resetParams() {
      this.time = []
      this.params = {
        page: 1,
        per_limit: 10,
        search: {
          order_no: '',
          merchant_no: '',
          finish_time_begin: '',
          finish_time_end: ''
        }
      }
      this.getData()
    },
    getData() {
      this.loading = true
      let params = copy.deepCopy(this.params)
      if (this.time && this.time.length) {
        const [begin, end] = this.time
        params.search.finish_time_begin = begin.getTime() / 1000
        params.search.finish_time_end = end.getTime() / 1000
      }
      calculationStat(params)
        .then(res => {
          const {
            data,
            meta: {
              pagination: { total },
              stat
            }
          } = res
          data.forEach(i => {
            i.dealt_at = date.formatDate(i.dealt_at)
            i.created_at = date.formatDate(i.created_at)
          })
          this.calculationList = data
          this.total = total
          this.otherInfo = stat
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 切换页码
    currentChange(value) {
      this.params.page = value
      this.getData()
    },
    sizeChange(value) {
      this.params.per_limit = value
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.calculation {
  width: 100%;
  height: 100%;
  .status {
    min-width: 700px;
    div {
      width: 15%;
      min-width: 200px;
      height: 100%;
      display: flex;
      padding: 10px 0;
      box-sizing: border-box;
      flex-wrap: wrap;
      border-right: 1px solid rgba(0, 0, 0, 0.08);
      p {
        width: 100%;
        height: 50%;
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>